<template>
  <div class="singer" v-loading="!singers.length">
    <index-list :data="singers" @select="onSelectSinger"></index-list>
    <router-view :singer="selectedSinger"></router-view>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import { getSingerList } from '@/service/singer'
  import IndexList from '@/components/base/index-list/index-list'

  export default defineComponent({
    name: 'singer',
    data() {
      return {
        singers: [],
        selectedSinger: null
      }
    },
    async created() {
      const reponse = await getSingerList()
      this.singers = reponse.singers
    },
    methods: {
      onSelectSinger(singer) {
        this.selectedSinger = singer
        this.$router.push(`/singer/${singer.mid}`)
      }
    },
    components: { IndexList }
  })
</script>

<style lang="scss" scoped>
  .singer {
    width: 100%;
    position: fixed;
    top: 88px;
    bottom: 0;
  }
</style>
